<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }

        .friend_detail_box li {
            background-color: #fff;
            padding: 0.7rem;
            display: flex;
            align-items: center;
            margin-top: 0.45rem;
        }

        .friend_detail_box li .friend_img {
            width: 2.45rem;
            margin-right: 0.75rem;
            border: 0.5rem;
        }

        .friend_detail_box li .friend_name_id {
            line-height: 1.5;
        }

        .friend_name_id .friend_name {
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
        }

        .friend_name_id .friend_id {
            font-size: 0.6rem;
            color: #666;
        }

        .left_title,
        .right_cnt {
            font-size: 0.7rem;
            color: #333;
        }

        .left_title {
            flex: 1;
        }

        .right_cnt {
            flex: 2;
        }

        .right_icon {
            text-align: right;
        }
        /*发消息按钮*/

        .send_msg {
            width: 80%;
            margin: auto;
            margin-top: 1.5rem;
            text-align: center;
            color: #fff;
            background-color: #f23030;
            padding: 0.625rem;
            border-radius: 1rem;
            font-size: 0.8rem;
            font-weight: 600;
        }





        /*添加备注*/
        .edit_remarks_box {
            position: fixed;
            bottom: 0;
            background: #fff;
            width: 100vw;
            display: none;
        }
        .change_remarks{
          display: flex;
          align-items: center;
          height: 2.25rem;
        }
        .input_box{
          width: 85vw;
        }
        .input_box input{
          padding: 0.5rem;
        }
        .change_remarks .btn{
          width: 15vw;
          height: 2.25rem;
          line-height: 2.25rem;
          text-align: center;
          vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <ul class="friend_detail_box">
            <li>
                <!-- <img :src="friend_info.head_img" alt="" class="friend_img"> -->
                <div class="friend_img" :style="'background:url('+friend_info.head_img+') center/cover no-repeat;height:2.45rem;'"></div>
                <div class="friend_name_id">
                    <div class="friend_name">{{friend_info.username}}</div>
                    <div class="friend_id">创客号：{{friend_info.maker_no}}</div>
                </div>
            </li>
            <li onclick="add_remarks()">
                <div class="left_title">备注</div>
                <div class="right_cnt remarks_txt">{{friend_info.remarks}}</div>
            </li>
            <li>
                <div class="left_title">所在地区</div>
                <div class="right_cnt">{{friend_info.address}}</div>
            </li>
            <li @click="open_new_win('five',friend_info.username,'朋友动态',friend_info.head_img)">
                <div class="left_title">TA的动态</div>
                <div class="right_cnt right_icon">
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li>
        </ul>


        <div class="send_msg" @click="open_chat_win('single',friend_info.username)">发消息</div>
    </div>


    <div class="edit_remarks_box">
        <div class="change_remarks">
            <div class="input_box">
                <input type="text" name="" value="" placeholder="请输入备注">
            </div>
            <div class="btn" onclick="submit_remarks()">完成</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        // 实例化vue 渲染数据
        var friend_data = new Vue({
            el: '.app',
            data: {
                friend_info: {}
            },
            mounted: function() {
                var $_this = this;
                api.ajax({
                    url: window.Url.Community_getUserDetails,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token'),
                            user_id: api.pageParam.friend_id
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        // alert( JSON.stringify( ret ) );
                        if (ret.re == 1) {
                            // console.log('获取到的好友的详细资料---' + JSON.stringify(ret))
                            $_this.friend_info = ret.data;
                        }
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            },

            methods: {
                // 打开对应的聊天窗口
                open_chat_win: function(type, target_name) {
                    api.openWin({
                        name: type + '_chat_header',
                        url: 'four_headers/' + type + '_chat_header.html',
                        pageParam: {
                            target_name: target_name,
                            target_id: api.pageParam.friend_id
                        }
                    });
                },

                // 打开新的窗口
                open_new_win: function(index, title, type, img_src) {
                    api.openWin({
                        name: 'four_' + index + '_header',
                        url: 'four_headers/four_' + index + '_header.html',
                        pageParam: {
                            title: title,
                            type: type,
                            img_src: img_src,
                            friend_id: api.pageParam.friend_id
                        }
                    });

                }
            }
        })

    };

    //打开提示框
    var dialog = new auiDialog({});

    function open_diglog() {


        // 初始化融云
        var rong = api.require('rongCloud2');
        rong.init(function(ret, err) {
            if (ret.status == 'success') {
                // console.log('初始化融云成功了')
            } else {
                api.toast({
                    msg: err.code
                });
            }
        });
        // 连接融云
        rong.connect({
            token: $api.getStorage('rong-token')
        }, function(ret, err) {
            if (ret.status == 'success') {
                // console.log('融云连接成功——————————' + JSON.stringify(ret));
            } else {
                alert(err.code)
            }
        });

        dialog.alert({
            title: "删除联系人",
            msg: '您确定要删除该联系人？',
            buttons: ['取消', '确定']
        }, function(ret) {
            if (ret) {
                api.execScript({
                    script: 'close_cover();'
                });

                if (ret.buttonIndex == 2) {
                    api.toast({
                        msg: '您点击了删除',
                        duration: 2000,
                        location: 'bottom'
                    });

                    // 调用删除好友的接口
                    api.ajax({
                        url: window.Url.Community_delFriend,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                user_id: api.pageParam.friend_id
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.re == 1) {

                                // 删除好友后移除与该好友的对话列表
                                rong.removeConversation({
                                    conversationType: 'PRIVATE',
                                    targetId: api.pageParam.friend_id
                                }, function(ret, err) {
                                    api.toast({
                                        msg: ret.status
                                    });
                                })

                                setTimeout(function() {
                                    api.closeWin({});
                                }, 2000)
                            }

                            api.toast({
                                msg: ret.info,
                                duration: 2000,
                                location: 'bottom'
                            });

                        } else {
                            alert(JSON.stringify(err));
                        }
                    });


                }
            }
        })
    }



    // 添加备注
    function add_remarks(){
      $('.edit_remarks_box').show();
      $('.edit_remarks_box .input_box input').focus();
    }

    // 提交备注
    function submit_remarks(){
      if($('.input_box input').val()==""){
        $('.edit_remarks_box').hide();
      }else{
        $('.edit_remarks_box').hide();
        api.ajax({
            url: window.Url.Community_editFriend,
            method: 'post',
            data: {
                values: {
                    token:$api.getStorage('user_data').token,
                    type:1,
                    remarks:$('.input_box input').val(),
                    user_id:api.pageParam.friend_id
                }
            }
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                api.toast({
                    msg: ret.info,
                    duration: 2000,
                    location: 'bottom'
                });

                if(ret.re==1){
                  $('.remarks_txt').html($('.input_box input').val());
                  $('.input_box input').val("");
                }

            } else {
                alert( JSON.stringify( err ) );
            }
        });

      }
    }
</script>

</html>
